const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');

const path = require('path');

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = merge(webpackBaseConfig, {
	mode: 'development',
	devtool: 'inline-source-map',
	// devtool: 'source-map',
	output: {
		/**
     * 所有模块编译完成输出的 filename 都会以这个路径为基准
     * devServer 的 publicPath 如果不是 / 的话
     * 就会以 devServer 的 publicPath 为基准输出文件,
     * 所以有 devServer publicPath 这个根本就没有用
     */
		// path: path.join(__dirname, 'app/dist'),

		/**
     * 只影响 index.html 网页中 script/link 的 src/href 属性，其路径会加上这个前缀
     * 默认情况下 src 的路径是 filename / chunkFilename 的值
     * 使用 devServer 时，如果没有 publicPath 或 其值是 / ，
     * 则编译输出会以这个路径为基准
     */
		publicPath: '/dev-app',

		filename: '[name].js',
		chunkFilename: '[name].chunk.js',
	},

	plugins: [
		new VueLoaderPlugin(),

		// @link https://github.com/webpack-contrib/mini-css-extract-plugin
		new MiniCssExtractPlugin({
			filename: '[name].[hash].css',
			chunkFilename: '[name].[hash].css',
		}),

		new HtmlWebpackPlugin({
			// 使用 devServer 时，filename 是参考 devServer 的 publicPath 的
			// 并且不能使用 ../ 这种上级相对路径
			filename: 'index.html',
			template: './src/template/index.ejs',
			inject: true,
		}),
		// new HtmlWebpackIncludeAssetsPlugin({
		// 	assets: [{ path: '//js.fundebug.cn/fundebug.1.2.3.min.js', attributes: { apikey: '91394f9dcbeed778ed4edd5136616d98a78bbe824643f32b26bfbe5dcc14757a' } }],
		// 	publicPath: false,
		// 	append: false,
		// 	hash: true,
		// }),
		new HtmlWebpackIncludeAssetsPlugin({
			assets: ['/static/vendors.app.js'],
			publicPath: false,
			append: false,
			hash: true,
		}),
		new webpack.DefinePlugin({
			'process.env': {
				DEV: 'true',
			},
		}),

		new webpack.DllReferencePlugin({
			context: __dirname,
			/* eslint-disable-next-line import/no-dynamic-require */
			manifest: require(path.join(__dirname, '.', 'manifest.json')),
		}),

		new webpack.HotModuleReplacementPlugin(),
	],

	devServer: {
		/* 服务器端口相关 */
		// 不检查访问者的 host
		disableHostCheck: true,
		// 绑定的 IP， 外部可访问一定要写 0.0.0.0
		host: '0.0.0.0',
		// 监听端口
		port: 7272,
		// 所有访问启动 gzip 压缩
		compress: true,

		/* 编译完成打开页面动作 */
		// 自动打开浏览器
		open: false,
		// 让浏览器打开本机IP，而不是 host 的值
		useLocalIp: true,
		// 自动打开页面的路径, 不能写网址，前面也不要写 /
		openPage: 'dev-app/#/',

		/* 服务器路径相关 */
		// 最好不要改这个路径，改了之后 filename 都会以这个路径为基准输入了
		// 默认是 /
		// publicPath: '/dev-admin',

		/*
     * 提供静态文件 的目录 string|array 优先级高于 publicPath, 默认是当前目录
     * 比如这样就可以访问 localhost:8078/css/common.css
     * 直接会指向 src/assets/css/common.css 文件
     */
		contentBase: path.join(__dirname, 'src/assets'),
		// 监听 contentBase 文件修改就 直接 webpage
		// watchContentBase: true

		/* 热更新 */
		// 启动热更新, 需要加入 HotModuleReplacementPlugin ，如果在 cli 里 --hot --inline 就不用加plugin了
		hot: true,
		// 以内联的形式插入HMR重新编译的代码 默认 true，false为iframe插入
		inline: true,
		// 当编译出错时，网页全屏覆盖显示错误位置
		// object|bool 默认 false
		overlay: true,

		/* API 兼容性 */
		// js使用  HTML5 History API 时
		// 任意的 404 响应都可能需要被替代为 index.html ?
		historyApiFallback: true,

		/* 跨域代理 */
		// 代理接口地址防止跨域
		// proxy: {
		//   '/api': {
		//     // 记得要代 http:// 的 schema, 不然会错误
		//     target: 'http://goat.me',
		//     secure: false,
		//     changeOrigin: true
		//   }
		// },

		watchOptions: {
			aggregateTimeout: 300,
			poll: 1000,
		},
	},
});
